<template>
  <a-drawer
    v-model:visible="visibleRef"
    :title="title"
    v-bind="getProps"
  >
    <slot></slot>
  </a-drawer>
</template>
<script lang="ts">
import { defineComponent, ref,computed,unref } from "vue";
import { DrawerProps} from "./type";
import props from './props'
export default defineComponent({
  emits: ["register"],
  props:props,
  setup(props: any, { emit }) {
    const visibleRef = ref<boolean>(false);
    const title = ref<string>("Basic Drawer");
    const openDrawer = (isOpen: boolean) => {
      visibleRef.value = isOpen;
      title.value = props.title;
    };
    const configProps=ref<DrawerProps>()
    const setDrawerProps = (props?: DrawerProps) => {
      configProps.value=props
    };
    const getProps = computed((): any => {
        const opt = {
          placement: "right",
          ...unref(configProps),
          visible: unref(visibleRef)
        };
       
        return opt as DrawerProps;
      });
    emit("register", { openDrawer, setDrawerProps });
    return {
      visibleRef,
      openDrawer,
      title,
       getProps
    };
  },
});
</script>
